<template>
    <div class="idle-container-list-item-detile" @click="toDetails(activeName, item)">
        <el-image style="width: 100px; height: 100px;" :src="article.cover" fit="cover">
            <div class="image-slot">
                <i class="el-icon-picture-outline">无图</i>
            </div>
        </el-image>
        <div class="idle-container-list-item-text">
            <div class="idle-container-list-title">
                {{ article.title }}
            </div>
            <div class="idle-container-list-idle-details">
                {{ article.digest }}
            </div>
            <div class="idle-item-foot">
                <el-button size="mini" plain @click.stop="handleUpdate(activeName, item, index)">
                    编辑
                </el-button>
                <el-button size="mini" plain @click.stop="handleDelete(article.id)">
                    删除
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import articleApi from "@/api/article";
export default {
    name: 'articleComponents',
    data() {
        return {
          activeName: 'first'
        }
    },
    props: {
        article: Object
    },
    methods: {
        toDetails() {
            this.$router.push({
                path: '/article/info',
                query: { articleId: this.article.id }
            })
        },
        handleDelete(id) {
          articleApi.deleteByIds(id).then(res => {
            if (res.data.code !== 200) {
              this.$message.error("操作失败");
              return;
            }
            this.$message.success("操作成功");
            this.$parent.getList();
          });
        },
        handleUpdate() {

        }
    }
}
</script>

<style scoped>
.idle-container-list-item-detile {
    height: 120px;
    display: flex;
    padding: 20px;
    align-items: center;
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
}

.idle-container-list-item-detile:hover {
    box-shadow: #202124  0px 0px 10px;
}

.idle-container-list-item-text {
    width: 100%;
    margin-left: 10px;
    height: 100px;
    max-width: 1150px;
}

.idle-container-list-title {
    font-weight: 600;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.idle-container-list-idle-details {
    font-size: 14px;
    color: #555555;
    padding-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.idle-container-list-idle-time {
    font-size: 13px;
    padding-top: 5px;
}

.idle-prive {
    font-size: 15px;
    padding-top: 5px;
    color: red;
}

.idle-item-foot {
    float: inline-end;
}
</style>
